<template>
    <div id="top">
      <div class="top">
        <div class="top_container">
          <div class="top_left">
            <el-button type="text">
              <i style="color: #000" class="el-icon-s-fold"></i>
              <span style="color: #000">{{ title }}</span>
            </el-button>
          </div>
          <div class="top_right">
            <el-dropdown>
              <span class="el-dropdown-link" 
              style="cursor: default;"
              @click="goToPerson">
                <el-avatar
                  shape="square"
                  size="small"
                  :src="this.url"
                ></el-avatar>
                <span >{{ username }}</span>
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <template v-slot:dropdown>
                <el-dropdown-menu >
                  <el-dropdown-item @click="goToPerson">个人中心</el-dropdown-item>
                  <el-dropdown-item @click="changePassword">修改密码</el-dropdown-item>
                  <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { onMounted } from "vue";
  export default {
    name: "top",
    components: {},
    data() {
      return {
        title: "首页",
        url:"",
        username: "",
      };
    },
    methods: {
      // 获取用户信息
      getInfo() {
        this.$http.get("/api/sysUser/detail").then((res) => {
          if(res.data.data != null) {
            this.username = res.data.data.username;
            this.url = res.data.data.avatar;
          }
        });
      },
      goToPerson() {
      this.$router.push('/person')
        .then(() => {
          console.log('Navigated to /person');
        })
        .catch(err => {
          console.error('Failed to navigate:', err);
        });
    },
    changePassword() {
      // 跳转到修改密码页面，假设路径为 '/change-password'
      this.$router.push('/change-password')
        .then(() => {
          console.log('Navigated to /change-password');
        })
        .catch(err => {
          console.error('Failed to navigate:', err);
        });
    },
    logout() {
      // 退出登录逻辑
      console.log('Logging out...');
    }
    },
    mounted() {
      this.getInfo();
    },
  };
  </script>
  
  <style lang="less" scoped>
  #top {
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background-color: #fff;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  
    .top {
      height: 60px;
      padding: 0 20px;
      .top_container {
        height: 60px;
        line-height: 60px;
        .top_left {
          float: left;
          i {
            font-size: 28px;
          }
          span {
            position: relative;
            top: -5px;
            margin-left: 10px;
            font-size: 16px;
          }
        }
        .top_right {
          float: right;
          position: relative;
          /deep/ .el-avatar--small {
          position: absolute;
          background-color: #fff;
          width: 40px;
          height: 35px;
          line-height: 70px;
          left: -44px;
          top: 10px;
        }
        }
      }
    }
  }
  </style>
  